<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>增值服务支付</title>
    <link rel="stylesheet" href="./cube.min.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        boay {
            font-size: 12px;
            font-family: "微软雅黑";
        }
        
        #app {
            padding: 3rem 0.5rem 0 0.5rem;
        }
        
        #app .cube-input:after {
            border: 1px solid #ccc;
        }
        
        #app .cube-input:after {
            border: 1px solid #EE6900;
        }
        
        #app p {
            padding: 1rem;
            text-align: center;
        }
        
        #app p img {
            width: 8rem;
        }
        
        div.card {
            margin: 1rem;
            border: 1px solid #EE6900;
            border-radius: 1rem;
            overflow: hidden;
        }
        
        div.card>h1 {
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            padding-bottom: 10px;
            padding: 2rem 0 0.5rem 0;
        }
        
        div.card>div.goods {
            overflow: hidden;
            margin: 1rem 0;
            background-color: #EE6900;
            ;
            height: 3rem;
            padding: 0.5rem;
            color: #fff;
        }
        
        div.card>div.goods>div {
            float: left;
            height: 3rem;
        }
        
        div.card>div.goods>div:first-child {
            width: 70%;
        }
        
        div.card>div.goods>div:last-child {
            width: 30%;
        }
        
        div.card>div.goods>div>div {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 12px;
        }
        
        div.goods-price>div {
            text-align: right;
        }
        
        div.card>div.input-wrap {
            display: flex;
            flex-direction: row;
            padding: 1rem 0;
        }
        
        .input-wrap .label {
            line-height: 40px;
            font-size: 14px;
            width: 100px;
            text-align: center;
        }
        
        div.btns {
            overflow: hidden;
            border-radius: 10px;
            margin: 3rem 1rem 1rem 1rem;
        }
        
        div.btns>div {
            float: left;
            height: 45px;
            text-align: center;
            line-height: 45px;
            color: #ffffff;
            font-size: 16px;
        }
        
        div.btns>div:first-child {
            width: 70%;
            background-color: #EE6900;
        }
        
        div.btns>div:last-child {
            width: 30%;
            background-color: #868686;
        }
        
        div.tips {
            font-size: 12px;
            color: #CCCCCC;
            padding: 1rem;
            line-height: 16px;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <img src="./images/logo.png">
        </p>

        <div class="card">

            <h1 v-text="goodsname"></h1>

            <div class="goods">
                <div class="goods-desc">
                    <div v-html="goodsdesc" style="font-size: 16px;font-weight: 700;"></div>
                    <div>整车一年盗抢保障服务</div>
                </div>
                <div class="goods-price">
                    <div v-text="goodsdiscountStr" style="font-size: 16px;font-weight: 700;"></div>
                    <div v-html="goodspriceStr" style="font-size: 12px;text-decoration: line-through;"></div>
                </div>
            </div>

            <div class="input-wrap">
                <div v-text="label" class="label"></div>
                <div style="flex: 1;padding: 0 0.5rem;">
                    <cube-input v-model="username" :placeholder="placeholder" style="width: 100%;" :clearable="true">
                        <div slot="append">
                            <div style="height:45px;width:45px;text-align:center;line-height:45px;">
                                <span v-if="isMatchDealer" class="icon iconfont icon-duihaocheckmark17" style="color:#40E476;font-size: 20px;"></span>
                                <span v-else class="icon iconfont icon-cuo" style="color:red; font-size: 20px;"></span>
                            </div>
                        </div>
                    </cube-input>
                </div>
            </div>

        </div>

        <div class="btns">
            <div v-text="btnStr" @click="getPrePayInfo"></div>
            <div v-text="btnStr1" @click="handleBeiAn"></div>
        </div>

        <div class="tips">
            <div style="color:#2F2F30;">温馨提示：</div>
            新进门店需要先进行门店备案取得系统的备案编码，然后输入备案编码充值购买。门店备案编码请妥善保管。
        </div>
    </div>

    <script type="text/javascript" src="../js/gps51-jquery.js"></script>
    <script type="text/javascript" src="./vue.min.js"></script>
    <script type="text/javascript" src="./cube.min.js"></script>
    <script type="text/javascript">
        function getParameterByName(name) {
            var url = location.search;
            url = decodeURIComponent(url);
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest[name];
        }

        var gappid = getParameterByName("appid");
        var openId = getParameterByName("openid");
        var goodsid = getParameterByName("goodsid");
        var goodsname = getParameterByName("goodsname");
        var goodsdesc = getParameterByName("goodsdesc");
        var goodsprice = Number(getParameterByName("goodsprice")).toFixed(2);
        var goodsdiscount = Number(getParameterByName("goodsdiscount")).toFixed(2);
        var baseUrl = 'https://www.gps51.com/';

        new Vue({
            el: '#app',
            data: {
                isMatchDealer: false,
                placeholder: "请输入门店投保备案编号",
                loading: false,
                label: '门店备案编号 :',
                btnStr: '立即支付',
                btnStr1: '门店备案',
                username: '',
                goodsname: goodsname,
                goodsdesc: goodsdesc, //"锐新保 x <b>20</b> 份",
                goodsprice: goodsprice,
                goodsdiscount: (goodsprice * goodsdiscount).toFixed(2)
            },
            computed: {
                goodspriceStr: function() {
                    return '原价:<span>' + this.goodsprice + '</span>';
                },
                goodsdiscountStr: function() {
                    return '¥' + this.goodsdiscount;
                },
            },
            methods: {
                debounce: function(func, wait, immediate) {
                    var timeout, args, context, timestamp, result;
                    var later = function() {
                        var last = Date.now() - timestamp;
                        if (last < wait && last >= 0) {
                            timeout = setTimeout(later, wait - last);
                        } else {
                            timeout = null;

                            if (!immediate) {
                                result = func.apply(context, args);
                                if (!timeout)
                                    context = args = null;
                            }
                        }
                    };
                    return function() {
                        context = this;
                        args = arguments;
                        timestamp = Date.now();
                        var callNow = immediate && !timeout;

                        if (!timeout)
                            timeout = setTimeout(later, wait);

                        if (callNow) {
                            result = func.apply(context, args);
                            context = args = null;
                        }
                        return result;
                    };
                },
                handleBeiAn() {
                    window.location.href = "https://su-c2db0da8022f6f3e.jinshuju.com/f/4iIHuV";
                },
                getPrePayInfo: function() {

                    var state = gappid + "_insureagent_" + goodsid + "_charge";
                    var me = this;
                    if (this.username != "") {
                        //调用支付接口
                        if (me.isMatchDealer === false) {
                            me.$createToast({
                                txt: '该门店没有备案,请点击门店备案',
                                type: 'txt'
                            }).show();
                            return;
                        }
                        me.loading = true;
                        $.ajax({
                            url: baseUrl + "wxpay/payaction?openid=" + openId + "&username=" + this.username + "&goodsid=" + goodsid + "&count=1" + "&state=" + state,
                            type: "get",
                            dataType: "json",
                            //contentType: "application/json;charset=utf-8",
                            success: function(json) {
                                var appId = json.appId;
                                var timeStamp = json.timeStamp;
                                var nonceStr = json.nonceStr;
                                var packAge = json.packAge;
                                var signType = json.signType;
                                var paySign = json.paySign;
                                me.onBridgeReady(appId, timeStamp, nonceStr, packAge, signType, paySign);
                            },
                            //调起微信支付失败，恢复到原来的订单量
                            error: function() {
                                me.loading = false;
                                me.$createToast({
                                    txt: '充值失败，请联系客服!',
                                    type: 'txt'
                                }).show();
                            }
                        });
                        //error=0 表示增加订单后总订单数大于10
                    } else {
                        me.$createToast({
                            txt: '请输入门店号!',
                            type: 'txt'
                        }).show();
                    }
                },
                onBridgeReady: function(appId, timeStamp, nonceStr, packAge, signType, paySign) {
                    var me = this;
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId": appId, //公众号名称，由商户传入     
                            "timeStamp": timeStamp,
                            "nonceStr": nonceStr, //随机串     
                            "package": packAge,
                            "signType": signType, //微信签名方式：     
                            "paySign": paySign //微信签名 
                        },
                        function(res) {
                            me.loading = false;
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
                                me.notifyPayOK(nonceStr);
                            }
                        }
                    );
                },
                notifyPayOK: function(nonceStr) {
                    var state = gappid + "_insureagent_" + goodsid + "_query";
                    //调用通知服务器充值成功
                    var me = this;
                    var toast = this.$createToast({
                        time: 0,
                        txt: '查询中',
                        mask: true,
                    })
                    toast.show();
                    try {
                        $.ajax({
                            url: baseUrl + "wxpay/payaction?noncestr=" + nonceStr + "&state=" + state,
                            type: "get",
                            dataType: "json",
                            //contentType: "application/json;charset=utf-8",
                            success: function(json) {
                                toast.hide();
                                if (json.status == 0) {
                                    var insurecount = json.insurecount;
                                    alert("充值成功，剩余" + insurecount + "份保单");
                                } else {
                                    me.$createToast({
                                        txt: '查询失败',
                                        type: 'txt'
                                    }).show();
                                }
                            },
                            //调起微信支付失败，恢复到原来的订单量
                            error: function(JSON) {
                                toast.hide();
                                me.$createToast({
                                    txt: '查询失败',
                                    type: 'txt'
                                }).show();
                            }
                        });
                    } catch (error) {
                        toast.hide();
                    }
                }
            },
            watch: {
                username: function(newVal) {
                    this.matchKeyWord(newVal);
                }
            },
            mounted: function() {
                var me = this;
                this.matchKeyWord = this.debounce(function(needmatchkey) {
                    $.ajax({
                        url: baseUrl + "webapi?action=matchkeyword",
                        type: "post",
                        //contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify({
                            type: "username",
                            needmatchkey: me.username
                        }),
                        success: function(data) {
                            var result = needmatchkey !== '' && data.matchstrlist != null && data.matchstrlist.length > 0;
                            if (result) {
                                var isFound = false;
                                for (var i = 0; i < data.matchstrlist.length; i++) {
                                    var item = data.matchstrlist[i];
                                    if (item.username == needmatchkey) {
                                        isFound = true;
                                    }
                                }
                                me.isMatchDealer = isFound;
                            } else {
                                me.isMatchDealer = false;
                            }
                        },
                        error: function(JSON) {

                        }
                    });
                }, 300);
            },
        })
    </script>

</body>

</html>